<template>
	<view class="homepage">
		<!-- 头部导航栏 -->
		<view class="head_navigation">
			<u-navbar leftText="返回" :safeAreaInsetTop="true" :placeholder="true">
				<view class="u-nav-slot" slot="left">
					<text class="postion_zone" @click="setCity">{{city}}</text>
					<u-icon name="map" size="19" top="1.2" color="black" bold="true"></u-icon>
					<view class="weather">
						<text>{{air}}</text>
						<text>{{weather}}</text>
					</view>
				</view>
			</u-navbar>
		</view>
		<!-- 顶部标签切换栏 -->
		<view class="top_Change">
			<u-tabs @click="changeTabs" :list="list1" lineColor="#00C589" lineWidth=50
				:itemStyle="{width:'100px',height: '44px'}" :activeStyle="{color: '#00C589'}">
			</u-tabs>
		</view>
		<!-- 滚动通知区域 -->
		<view>
			<u-notice-bar :text="ScrollText"></u-notice-bar>
		</view>
		<!-- 顶部标签切换，如果顶部标签为快车 -->
		<view class="" v-if="tabName == '快车'">
			<!-- 显示地图区域 -->
			<view class="map_navigation">
				<!-- 标记点 ：  markers -->
				<map id="navMap" class="map" enable-traffic="true" show-location enable-poi="true" enable-scroll="true"
					:latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="initialPoint">
				</map>
				<!-- 雨水 -->
				<canvas canvas-id="effect" id="effect"></canvas>
			</view>
			<!-- 出发点和终点 -->
			<view class="call_car">
				<view class="start_point" @tap="setStartPath">
					<view class="dot"></view>
					<view class="startPath">
						<view class="addName">
							{{addressName}}
						</view>
						<view>
							{{addressDesc}}
						</view>
					</view>
				</view>
				<view class="end_point" @tap="setEndPath">
					<view class="dot1"></view>
					<input v-if="!endPath" type="text" placeholder="输入您的目的地" class="end_input" disabled="true"
						placeholder-style="color:black">
					<view v-else class="startPath">
						<view class="addName">
							{{addressEnd}}
						</view>
						<view>
							{{addressEndD}}
						</view>
					</view>
				</view>
			</view>
			<!-- 开始叫车按钮 -->
			<view class="callBtn">
				<u-button text="开始叫车" @click="callFask" color="linear-gradient(to right, #00B7B5, #16AF77)">
				</u-button>
			</view>
			<!-- 红包优惠卷 -->
			<view class="discount_zone" @click="robBtn">
				<view class="cjPhoto">
					<image src="../../static/抽奖.png" mode="aspectFit"></image>
				</view>
				<view class="fontSize">
					<image src="../../static/抢.png" mode="aspectFit"></image>
				</view>
				<!-- <view class="discount">
					<view>
						<view class="discount_text1">限时抢购优惠卷</view>
						<view class="discount_text2">福利驾到</view>
						<view class="discount_text3" >
							马上抢
						</view>
					</view>
				</view> -->
			</view>
			<!-- 侧边定位栏 -->
			<view class="broadside">
				<img src="../../static/dingwei.png" alt="" srcset="">
			</view>
		</view>
		<!-- 顶部标签切换，如果顶部标签为出租车 -->
		<view class="" v-if="tabName == '出租车' ">
			<!-- 出发点和终点 -->
			<view class="call_car1">
				<view class="start_point" @tap="setStartPath">
					<view class="dot"></view>
					<view class="startPath">
						<view class="addName">
							{{addressName}}
						</view>
						<view>
							{{addressDesc}}
						</view>
					</view>
				</view>
				<view class="end_point" @tap="setEndPath">
					<view class="dot1"></view>
					<input v-if="!endPath" type="text" placeholder="输入您的目的地" class="end_input" disabled="true"
						placeholder-style="color:black">
					<view v-else class="startPath">
						<view class="addName">
							{{addressEnd}}
						</view>
						<view>
							{{addressEndD}}
						</view>
					</view>
				</view>
				<!-- 预约时间 -->
				<view class="appointmentCar">
					<view class="appointmentCar_item" @click="TimeShow = true">
						<u-icon name="calendar" size="22" customStyle="margin-right:10px"></u-icon>
						<text>预约时间 {{showTime}}</text>
					</view>
				</view>
				<!-- 开始叫车按钮 -->
				<view class="callBtn">
					<u-button text="开始叫车" @click="calltaxi" color="linear-gradient(to right, #00B7B5, #16AF77)">
					</u-button>
				</view>
				<!-- 底部法律信息 -->
				<view class="legislation_zone">
					<view class="">
						法律条款和平台规则
					</view>
					<view class="">
						证照信息
					</view>
				</view>
				<!-- 侧边定位栏 -->
				<view class="broadside1">
					<img src="../../static/anquan.png" alt="" srcset="">
				</view>
				<!-- 预约时间弹出层 -->
				<view class="">
					<view>
						<u-datetime-picker :minHour="minHour" :minMinute="minMinute" :closeOnClickOverlay="true"
							:show="TimeShow" v-model="showTime" mode="time" @confirm="confirmSubscribe"
							@cancel="closeSubscribe" @close="closeSubscribe">
						</u-datetime-picker>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示订单的 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import { wxGetAddress } from '../../common/address.js'; //刚刚封装的方法
	import amap from "../../common/amap-wx.130.js"

	import {
		mapState,
		mapMutations
	} from 'vuex'

	import {
		getDataObj
	} from '../../common/utils.js'

	import Particle from '@/common/effect.js'

	export default {

		data() {
			return {
				navMap: '', // 初始实例化地图对象
				amapPlugin: null, // 插件效果
				gaodeKey: "4412f1a1546136b8476c2c1011cbbad9", //  高德地图申请的key
				latitude: '', // 纬度
				longitude: '', // 经度
				addressName: '', // 具体地址的名字
				addressDesc: '', // 地址的描述
				city: '', //城市
				province: '', // 省份
				addressEnd: '', //目的地的名
				addressEndD: '', //目的地描述
				//  初始点(用户的初始位置)
				initialPoint: [{
					id: 0,
					latitude: '',
					longitude: '',
					iconPath: "../../static/location1.png",
					width: 30,
					height: 30
				}],
				points: [], // 缩放视野---记录起点和终点
				polyline: [], //路线的规划
				distance: '', //距离
				minute: '', //分钟
				payMoney: '', //费用
				air: '', //气温
				weather: '', // 天气
				Rain: null, //雨水--class
				with: 0, //宽
				height: 0, //高
				scale: 0, //屏幕宽度
				ctx: null, //控制雨水插件
				rain: null, //控制雨水的动画
				selected: "home", // 当前底部tab显示页面
				// 头部切换标签栏
				list1: [{
					name: '快车'
				}, {
					name: '出租车'
				}],
				ScrollText: "欢迎来到滴滴打车平台~", //  滚动通知区域内容
				tabName: '快车',
				TimeShow: false, //  是否显示预约时间弹出层
				minHour: '', // 最小的预约小时
				minMinute: '', // 最小的预约分钟
				showTime: '', // 显示当前时间
				carNum: 0, //次数
			}
		},
		computed: {
			...mapState('userLocation', ['startPath', 'endPath', 'setcity']),
			...mapState('userInfo', ['userSocketID'])
		},
		// 只会触发一次
		onLoad() {
			// 高德地图sdk的获取
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodeKey
			})
			// 实例化地图对象
			this.navMap = uni.createMapContext("navMap", this)
			// 获取当前位置
			this.getLocation()
			// 定位当前位置
			this.getCurrent()
			// 获取当前时间的时和分
			this.setTime()

			// 用户ID
			const userId = uni.getStorageSync('userTable').userId

			// 拿到用户的socket的身份牌---后期可以用 用户登录替换
			this.socket.emit('login', userId)

			// 绘图的构造函数
			this.Rain = Particle.Particle
			// 获取手机大小
			uni.getSystemInfo({
				success: res => {
					this.with = res.windowWidth
					this.scale = this.with / 375
				}
			})
			// 绘图 -- 雨水效果 
			this.ctx = uni.createCanvasContext('effect')
			this.height = 768 / 2 * this.scale
			this.rain = new this.Rain(this.ctx, this.with, this.height, {
				amount: 100,
				speedFactor: 0.03
			})
		},
		onShow() {
			// 路线
			this.pathPlanning()
			// 收到服务器
			this.getmsg()
			// 切换城市
			if (this.setcity) {
				this.city = this.setcity
				// 修改地图的显示
				this.setAddress(this.city)
			}
			// 获取天气
			this.getWeather()
		},
		methods: {
			...mapMutations('userLocation', ['routePath', 'getInitPath', 'getEnd', 'setWeather', 'setCityPath']),
			...mapMutations('userInfo', ['setUserSocketID']),
			getmsg() {
				this.socket.on('relogin', message => {
					// 收到服务器推送的消息
					console.log('收到服务器登记成功信息：', message)
					const name = message.name
					this.setUserSocketID(name)
				})
			},
			// 路线规划
			pathPlanning() {
				// 起点
				if (this.startPath) {
					this.addressName = this.startPath.name
					this.addressDesc = this.startPath.district + this.startPath.address
					this.initialPoint[0] = {
						id: 0,
						longitude: this.startPath.longitude,
						latitude: this.startPath.latitude,
						iconPath: "../../static/location1.png",
						width: 30,
						height: 30
					}
					this.points[0] = {
						longitude: this.startPath.longitude,
						latitude: this.startPath.latitude,
					}
				}
				// 目的地
				if (this.endPath) {
					console.log(this.endPath, 312)
					this.addressEnd = this.endPath.name
					this.addressEndD = this.endPath.address
					this.initialPoint[1] = {
						id: 1,
						longitude: this.endPath.longitude,
						latitude: this.endPath.latitude,
						iconPath: "../../static/终点.png",
						width: 40,
						height: 40
					}
					this.points[1] = {
						longitude: this.endPath.longitude,
						latitude: this.endPath.latitude
					}
				}
				// 绘制路线
				if (this.points.length == 2) {
					console.log('绘制路线', this.points, 329)

					this.amapPlugin.getDrivingRoute(getDataObj(this.points, this))


					// this.amapPlugin.getDrivingRoute(this.getDataObj())

					// 缩放地图
					this.navMap.includePoints({
						padding: [70],
						points: this.points
					})
				}
			},
			// 绘制路线
			// getDataObj() {
			// 	let that = this
			// 	let color = '#0091ff'
			// 	console.log(that.points[0].longitude + ',' + that.points[0].latitude, 346)
			// 	console.log(that.points[1].longitude + ',' + that.points[1].latitude, 347)
			// 	return {
			// 		// 起点
			// 		origin: that.points[0].longitude + ',' + that.points[0].latitude,
			// 		// 终点
			// 		destination: that.points[1].longitude + ',' + that.points[1].latitude,
			// 		success: (data) => {
			// 			console.log(data, '驾车的路线')
			// 			that.distance = (data.paths[0].distance / 1000).toFixed(1)
			// 			that.minute = Math.ceil(data.paths[0].duration / 60)
			// 			that.payMoney = data.taxi_cost
			// 			// 驾车的路线
			// 			let points = []
			// 			if (!data || !data.paths || !data.paths[0] || !data.paths[0].steps) {
			// 				uni.$showMsg('查询失败')
			// 				return
			// 			}
			// 			let steps = data.paths[0].steps
			// 			for (let i = 0; i < steps.length; i++) {
			// 				let polylines = steps[i].polyline.split(';')
			// 				for (let j = 0; j < polylines.length; j++) {
			// 					let locations = polylines[j].split(',')
			// 					points.push({
			// 						longitude: locations[0],
			// 						latitude: locations[1]
			// 					})
			// 				}
			// 			}
			// 			// steps.forEach(item => {
			// 			// 	let polylines = item.polyline.split(';')
			// 			// 	polylines.forEach(item1 => {
			// 			// 		let locations = item1.split(',')
			// 			// 		points.push({
			// 			// 			longitude: locations[0],
			// 			// 			latitude: locations[1]
			// 			// 		})
			// 			// 	})
			// 			// })
			// 			// 路线的规划
			// 			this.polyline = [{
			// 				points,
			// 				color,
			// 				width: 3
			// 			}]
			// 			console.log(this.polyline[0].points, 331)
			// 			console.log(this.polyline[0].points.length, 334)

			// 			if (this.polyline[0].points.length > 2) {
			// 				// 改变起点
			// 				that.points[0].longitude = this.polyline[0].points[2].longitude
			// 				that.points[0].latitude = this.polyline[0].points[2].latitude
			// 			}
			// 			if (this.polyline[0].points.length == 2) {
			// 				this.carNum++
			// 				// 改变起点
			// 				that.points[0].longitude = this.polyline[0].points[1].longitude
			// 				that.points[0].latitude = this.polyline[0].points[1].latitude
			// 				if (this.carNum == 2) {
			// 					this.initialPoint[0] = {
			// 						id: 0,
			// 						longitude: this.polyline[0].points[0].longitude,
			// 						latitude: this.polyline[0].points[0].latitude,
			// 						iconPath: "../../static/location1.png",
			// 						width: 30,
			// 						height: 30
			// 					}
			// 					return
			// 				}
			// 			}
			// 			改起点的坐标
			// 			setTimeout(() => {
			// 				this.initialPoint[0] = {
			// 					id: 0,
			// 					longitude: this.polyline[0].points[0].longitude,
			// 					latitude: this.polyline[0].points[0].latitude,
			// 					iconPath: "../../static/location1.png",
			// 					width: 30,
			// 					height: 30
			// 				}
			// 				console.log(347, this.polyline[0].points)
			// 				this.amapPlugin.getDrivingRoute(this.getDataObj())
			// 			}, 500)
			// 		},
			// 		// 获取路线失败
			// 		fail(info) {
			// 			console.log('获取失败', info)
			// 		}
			// 	}
			// },
			// 获取当前位置的经纬度
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						that.initialPoint[0].latitude = res.latitude
						that.initialPoint[0].longitude = res.longitude
						that.latitude = res.latitude
						that.longitude = res.longitude
						// 设置缩放
						that.points[0] = {
							longitude: res.longitude,
							latitude: res.latitude
						}
					},
					fail(err) {
						console.log(err, '报错了')
					}
				})
			},
			// 获取具体位置的地址信息
			getCurrent() {
				this.amapPlugin.getRegeo({
					success: data => {
						console.log('469', data, '获取当前位置')
						this.province = data[0].regeocodeData.addressComponent.province
						this.addressName = data[0].name
						this.addressDesc = data[0].desc
						this.city = data[0].name.split('市')[0]
						// 省
						let province = data[0].regeocodeData.formatted_address.split('省')[0] + '省'
						this.city = data[0].name.split('市')[0] + '市'
						let address = {
							id: 0,
							province,
							address: this.addressName,
							latitude: this.latitude,
							longitude: this.longitude,
							name: this.addressName,
							city: this.city,
							district: this.addressDesc
						}
						this.getInitPath(address)
						console.log('定位出发地', address)
					},
					fail: (err) => {
						console.log(err, '报错了')
					}
				})
			},
			// 获取当前天气信息
			getWeather() {
				this.amapPlugin.getWeather({
					city: this.city,
					success: res => {
						this.air = res.liveData.temperature + '°'
						this.weather = res.liveData.weather
						console.log(this.weather, 502)
						// 存入vuex天气
						this.setWeather(this.weather)
						if (this.weather == '大雨' || this.weather == '小雨' || this.weather == '中雨' || this
							.weather == '强降雨' || this.weather == '连续降雨') {
							// 开始下雨
							this.rain.run()
						} else {
							// 停止下雨
							this.rain.clear()
						}
					},
					fail: () => {
						uni.showToast({
							title: '没有开启位置权限',
							icon: 'none'
						})
					}
				})
			},
			// 跳转快车页面
			async callFask() {
				const result = await this.$http('/unfinishedOrder', {
					userID: this.userSocketID
				})
				if (result.userCallState == false) {
					this.$refs.uToast.show({
						type: 'error',
						message: result.message,
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
					return
				}
				if (this.initialPoint.length == 2 && this.points.length == 2 && this.polyline.length >= 1) {
					// 存入vuex
					this.routePath([this.polyline, this.initialPoint, this.points])
					// 恶劣天气自动提高价钱
					if (this.weather == '大雨' || this.weather == '小雨' || this.weather == '中雨' || this
						.weather == '强降雨' || this
						.weather == '连续降雨') {
						this.payMoney = (Number(this.payMoney) + 10).toFixed(2)
					}
					uni.navigateTo({
						url: '/subpkg/callFask/callFask?distance=' + this.distance + '&minute=' + this
							.minute +
							'&payMoney=' + this.payMoney
					})
				} else {
					uni.$showMsg('请选择目的地', 'error')
					return
				}
			},

			// 跳转出租车页面
			calltaxi() {
				if (this.initialPoint.length == 2 && this.points.length == 2 && this.polyline.length >= 1) {
					this.routePath([this.polyline, this.initialPoint])
					let initialAddress = {
						addressName: this.addressName,
						addressDesc: this.addressDesc,
						addressEnd: this.addressEnd,
						addressEndD: this.addressEndD,
						type: '28',
						route: [{
							latitude: this.initialPoint[0].latitude,
							longitude: this.initialPoint[0].longitude
						}, {
							latitude: this.initialPoint[1].latitude,
							longitude: this.initialPoint[1].longitude
						}],
						province: this.province,
						city: this.city
					}
					console.log(initialAddress);
					uni.setStorageSync('initialAddress', JSON.stringify(initialAddress))
					uni.navigateTo({
						url: '/subpkg/calltaxi/calltaxi?distance=' + this.distance + '&minute=' + this
							.minute +
							'&payMoney=' + this.payMoney
					})
				} else {
					uni.$showMsg('请选择目的地', 'error')
					return
				}
			},
			// 改写起点位置
			setStartPath() {
				// 跳转携带参数
				uni.navigateTo({
					url: '/subpkg/startSearch/startSearch?longitude=' + this.longitude + '&latitude=' +
						this
						.latitude
				})
			},
			// 设置目的地
			setEndPath() {
				uni.navigateTo({
					url: '/subpkg/endSearch/endSearch?longitude=' + this.longitude + '&latitude=' +
						this
						.latitude
				})
			},
			// 头部标签栏切换
			changeTabs(item) {
				console.log(item);
				this.tabName = item.name
			},
			// 关闭预约时间选择弹出层
			closeSubscribe() {
				this.TimeShow = false
			},
			// 确定预约时间的方法
			confirmSubscribe(value) {
				this.TimeShow = false
				console.log(value)
			},
			// 获取当前时间的时和分
			setTime() {
				let time = new Date()
				let hours = time.getHours()
				let min = time.getMinutes()
				this.minHour = hours
				this.minMinute = min
				if (min == 0) {
					let dayTime = hours + ':' + '00'
					this.showTime = dayTime
					this.goTime()
				}
				if (min > 0 && min < 10) {
					let dayTime = hours + ':' + '0' + min
					this.showTime = dayTime
					this.goTime()
				}
				if (min >= 10) {
					let dayTime = hours + ':' + min
					this.showTime = dayTime
					this.goTime()
				}
			},
			// 动态获取时间
			goTime() {
				setInterval(() => {
					this.setTime()
				}, 60000)
			},
			// 切换城市选择
			setCity() {
				uni.navigateTo({
					url: '/subpkg/cutWeather/cutWeather'
				})
			},
			// 切换成城市
			setAddress(city) {
				let parameters = {
					'key': '8050215deac44b69809a3686d4e3d5d7', //web key
					'address': city
				}
				let base = 'https://restapi.amap.com/v3/geocode/geo'
				uni.request({
					method: 'GET',
					url: base,
					data: parameters,
					success: res => {
						console.log(res, '请求成功=====')
						if (res.data.count == 1) {
							let location = res.data.geocodes[0].location.split(',')
							// 经度
							let jResult = location[0]
							// 纬度
							let wResult = location[1]
							// 开始出发地
							this.initialPoint[0].latitude = wResult
							this.initialPoint[0].longitude = jResult

							this.latitude = wResult
							this.longitude = jResult
							// 开始出发地
							this.addressName = res.data.geocodes[0].city + '人民政府'
							this.addressDesc = res.data.geocodes[0].formatted_address + '人民政府'

							this.points = []
							// 路线绘制
							this.points[0] = {
								longitude: jResult,
								latitude: wResult,
							}
							this.addressEnd = ''
							this.addressEndD = ''
							this.getEnd('')
							this.setCityPath('')
						}
					}
				})
			},
			// 抢优惠卷
			robBtn() {
				uni.redirectTo({
					url: '/subpkg/coupons/coupons'
				})
			}

			// // 地图视野改变时触发
			// updateMap(event) {
			// 	let that = this
			// 	// 经纬度
			// 	let location = null
			// 	this.navMap.getCenterLocation({
			// 		success: (res) => {
			// 			// // 经度
			// 			// let jResult = (res.longitude + '').split('.')
			// 			// res.longitude = Number(jResult[0].toString() + '.' + jResult[1].slice(0, 6))
			// 			// // 纬度
			// 			// let wResult = (res.latitude + '').split('.')
			// 			// res.latitude = Number(wResult[0].toString() + '.' + wResult[1].slice(0, 6))

			// 			// let location = res.longitude + ',' + res.latitude
			// 			// let parameters = {
			// 			// 	'location': location,
			// 			// 	'key': '8050215deac44b69809a3686d4e3d5d7', //web key
			// 			// 	'radius': 1000,
			// 			// 	'batch': false,
			// 			// 	'roadlevel': 0
			// 			// }
			// 			// that.moveStart(parameters)
			// 			that.latitude = res.latitude
			// 			that.longitude = res.longitude
			// 			that.initialPoint[0].latitude = res.latitude
			// 			that.initialPoint[0].longitude = res.longitude
			// 		},
			// 		fail: (err) => {
			// 			console.log(err)
			// 		}
			// 	})
			// },
			// setAddress(latitude, longitude) {
			// 	// 经纬度
			// 	let location = null
			// 	let wResult = (latitude + '').split('.')
			// 	latitude = Number(wResult[0].toString() + '.' + wResult[1].slice(0, 6))
			// 	// 经度
			// 	let jResult = (longitude + '').split('.')
			// 	longitude = Number(jResult[0].toString() + '.' + jResult[1].slice(0, 6))
			// 	location = longitude + ',' + latitude
			// 	let parameters = {
			// 		'location': location,
			// 		'key': '8050215deac44b69809a3686d4e3d5d7', // web key
			// 		'radius': 1000,
			// 		'batch': false,
			// 		'roadlevel': 0
			// 	}
			// 	let addressName = ''
			// 	let addressDesc = ''
			// 	let base = 'http://restapi.amap.com/v3/geocode/regeo'
			// 	uni.request({
			// 		method: 'GET',
			// 		url: base,
			// 		data: parameters,
			// 		success: res => {
			// 			console.log(res, '请求成功=====')
			// 			if (res.data.status == 1) {
			// 				addressName = res.data.regeocode.formatted_address.split('区')[1]
			// 				addressDesc = res.data.regeocode.formatted_address
			// 				this.addressName = addressName
			// 				this.addressDesc = addressDesc
			// 			}
			// 		}
			// 	})
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.appointmentCar {
		width: 100%;
		height: 120rpx;
		margin: 10px auto;
		border-radius: 10px;
		background-color: white;
	}

	.appointmentCar_item {
		display: flex;
		padding-left: 10px;
		text-align: center;
		line-height: 120rpx;
	}

	.homepage {
		background-color: #F2F3F7;
	}



	.u-nav-slot {
		display: flex;
	}

	.postion_zone {
		vertical-align: middle;
		margin-right: 5rpx;
		font-weight: 900;
	}

	.map_navigation {
		width: 95%;
		height: 500rpx;
		border: 1px solid #F2F5FA;
		border-radius: 10px;
		margin: 5px auto;
		position: relative;
	}

	.map {
		width: 100%;
		height: 100%;
		border-radius: 20px;
	}

	.call_car {
		width: 95%;
		height: 320rpx;
		border: 1px solid #E3E6EE;
		margin: 0px auto;
		position: relative;
		background-color: white;
		border-radius: 15px;
		box-shadow: 0 0 15px #E3E6EE;
	}

	.call_car1 {
		width: 95%;
		height: 370rpx;
		border: 1px solid #E3E6EE;
		margin: 0px auto;
		position: relative;
		// top: -40px;
		background-color: white;
		border-radius: 15px;
		box-shadow: 0 0 15px #E3E6EE;
	}




	.start_point {
		padding: 0 18px;
		width: 100%;
		display: flex;
		height: 50%;
		color: #16AF77;
		font-size: 14px;
		align-items: center;
		justify-content: flex-start;

		.dot {
			width: 7px;
			height: 7px;
			border-radius: 100%;
			background: #16AF77;
		}

		.startPath {
			margin-left: 15px;
			width: 85%;

			.addName {
				font-size: 35rpx;
				margin-bottom: 5rpx;
			}
		}
	}

	.end_point {
		padding: 0 18px;
		width: 100%;
		display: flex;
		height: 50%;
		color: #16AF77;
		font-size: 14px;
		align-items: center;
		justify-content: flex-start;

		.dot1 {
			width: 7px;
			height: 7px;
			border-radius: 100%;
			background: #ffaa00;
		}

		.end_input {
			font-size: 20px;
			color: black;
			padding-left: 5px;
			font-weight: 900;
			margin-left: 15px;
		}

		.startPath {
			margin-left: 15px;
			width: 85%;

			.addName {
				font-size: 35rpx;
				margin-bottom: 5rpx;
			}
		}
	}



	.Sliding_fast {
		width: 95%;
		margin: -15px auto;
	}

	.swiper {
		height: 440rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.discount_zone {
		position: relative;
		width: 90%;
		margin: 10px auto;

		.cjPhoto {
			width: 100%;
			height: 120px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.fontSize {
			position: absolute;
			top: 8%;
			width: 20%;
			height: 100rpx;
			border-radius: 20px;
			animation: scaleDraw 1s linear infinite;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20px;
			}
		}

		@keyframes scaleDraw {

			/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
			0% {
				transform: scale(1);
				/*开始为原始大小*/
			}

			50% {
				transform: scale(1.2);
				/*放大1.1倍*/
			}
		}

	}


	.discount {
		width: 100%;
		height: 240rpx;
		background-color: white;
		border-radius: 15px;
		display: flex;
	}

	.discount>view {
		width: 50%;
		height: 100%;

	}

	.discount_text1 {
		margin-top: 15px;
		margin-left: 18px;
		font-weight: 900;
	}

	.discount_text2 {
		padding: 7px;
		margin-left: 10px;
		font-weight: 900;
		font-size: 12px;
		color: #9E9E9E;
	}

	.discount_text3 {
		padding: 3px;
		font-size: 12px;
		font-weight: 900;
		border: 2px solid #E8743E;
		width: 140rpx;
		margin-left: 13px;
		color: #E8743E;
		border-radius: 25px;
		text-align: center;
	}


	.legislation_zone {
		width: 100%;
		height: 200rpx;
		margin: 135px auto;
		text-align: center;
		font-size: 13px;
	}

	.legislation_zone>view {
		margin-top: 5px;
		color: #97989A;
	}

	.top_Change {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: white;
	}

	.broadside {
		position: absolute;
		top: 650rpx;
		right: 5px;
		z-index: 100;
		width: 80rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 10px;
	}

	.broadside img {
		width: 20px;
		height: 20px;
		display: block;
		margin: auto;
		margin-top: 23rpx;
	}

	.broadside1 {
		position: absolute;
		top: 1050rpx;
		left: 5px;
		z-index: 100;
		width: 80rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 10px;
	}

	.broadside1 img {
		width: 20px;
		height: 20px;
		display: block;
		margin: auto;
		margin-top: 15rpx;
	}


	.callBtn {
		margin: 14px auto;
		width: 95%;
	}

	.weather {
		width: 100px;
		box-sizing: border-box;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	// 雨水
	#effect {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
	}
</style>
